<template>
  <app-page :login="false">
    <mxp-refresh-page ref="mxpRefreshPageRef" :reachBottom="true" :queryData="queryList">
      <view style="box-sizing: border-box; padding: 15px 30rpx">
        <view v-for="(item, index) in watchRecord" :key="index" class="view-record" @click="openVideoDetails(item)">
          <view class="img-box">
            <mxp-image width="180rpx" height="320rpx" errorSize="22px" borderRadius="10px 0 0 10px" :src="item.dramaCover"></mxp-image>
          </view>
          <view style="flex: 1; width: 100%; padding: 10px 15px">
            <view class="record-title-box">
              <text class="record-title">{{ item.dramaTitle }}</text>
            </view>
            <view class="record-info-box">
              <text class="record-info">导演：{{ item.director }}</text>
              <text class="record-info">共{{ item.seqNum }}集</text>
            </view>
            <view class="record-info-box">
              <text class="intro record-info" style="color: #eeeeee">简介: {{ item.dramaDesp || '' }}</text>
            </view>
            <view class="butt-box">
              <text style="font-size: 12px; color: #ffffff">立即观看</text>
            </view>
          </view>
        </view>
      </view>
    </mxp-refresh-page>
  </app-page>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import MxpImage from '@/mxp-ui/mxp-image/mxp-image.vue';
  import AppPage from '@/components/app-page/app-page.vue';
  import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
  import { type DramaChasingRank, getDramaBingeWatchRankingAxios } from '@/api/drama';
  import { openPlayletPage } from '@/utils/page/rest';
  import MxpRefreshPage, { type Ins } from '@/mxp-ui/mxp-refresh-page/mxp-refresh-page.vue';
  import { useRefresh } from '@/mxp-ui/mxp-tool/hooks/useHooksRefresh.ts';

  const { mxpRefreshPageRef } = useRefresh(onPullDownRefresh, onReachBottom);
  /** 列表 */
  const watchRecord = ref<DramaChasingRank[]>([]);
  /**
   * 获取数据
   */
  async function queryList(ins: Ins) {
    try {
      const res = await getDramaBingeWatchRankingAxios(ins.page, ins.size);
      watchRecord.value = ins.page > 1 ? watchRecord.value.concat(res.data.records) : res.data.records;
      ins.setMoreSuccess(res.data.records.length, res.data.total);
    } catch (error) {
      ins.setMoreEmpty('fail_load', error.msg || '获取数据失败，BD001');
    }
  }

  /** 打开视频详情 */
  function openVideoDetails(item: DramaChasingRank) {
    openPlayletPage(item);
  }
</script>

<style lang="scss" scoped>
  .view-record {
    position: relative;
    display: flex;
    width: 690rpx;
    margin-bottom: 15px;
    vertical-align: top;
    background: #7c2222;
    border-radius: 10px;
    box-shadow: 0 0 12px #d9def4;

    .record-title-box {
      width: 100%;

      .record-title {
        overflow: hidden;
        font-size: 16px;
        font-weight: bold;
        color: #ffffff;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .record-info-box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      margin-top: 6px;

      .record-info {
        font-size: 12px;
        color: #ffffff;
        text-align: justify;
      }

      .intro {
        display: -webkit-box;
        overflow: hidden;
        word-break: break-all;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    .butt-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 70px;
      padding: 6px;
      margin-top: 16px;
      background: #ae1e1e;
      border-radius: 20px;
    }
  }
</style>
